<template>
  <div class="app-container">
    <EtopSearch
      :options="options"
      @getData="searchFn"
      @resettingFn="resettingFn"
    />
    <ETable
      ref="ETable"
      :height="200"
      :titleObj="titleObj"
      @sortFun="sortFun"
      operateWidth="120"
      :reqObj="setOf"
      :reqFn="getSysSystem"
    >
      <template v-slot="{ scope }">
        <el-button @click="fn(scope)" type="text" size="small"
          >访问管理端</el-button
        >
      </template>
    </ETable>
    <edit ref="edit"></edit>
  </div>
</template>

<script>
import ETable from "@/components/ETable";
import edit from "./edit.vue";
import EtopSearch from "@/components/EtopSearch";
import { getSysSystem } from "@/api/management/system";
export default {
  name: "system",
  components: {
    ETable,
    edit,
    EtopSearch,
  },
  data() {
    return {
      options: [
        {
          type: "input",
          name: "系统名字：",
          key: "systemName",
          value: "",
        },
      ],
      setOf: {
        systemName: "",
        sortStr: "",
      },
      titleObj: [
        { prop: "SYSTEM_CODE", label: "编码", width: "78", sortable: "custom" },
        {
          prop: "SYSTEM_NAME",
          label: "系统名称",
          width: "180",
          sortable: "custom",
        },
        { prop: "ICON_ADDRESS", label: "图标地址", width: "180" },
        { prop: "SYSTEM_DESC", label: "系统描述", minWidth: "180" },
        { prop: "SORT_NO", label: "系统排序", width: "110" },
        { prop: "ACCESS_STR", label: "启用访问端", width: "160" },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getSysSystem,
    async fn(row) {
      this.$refs.edit.open(row);
    },
    searchFn(val) {
      // 如果在第四页搜索会把页码4传过去没数据，所以搜索变成1
      this.$refs.ETable.pageInfo.page = 1;
      // 保存传递出来的搜索数据，用于表格请求
      this.setOf.systemName = val.systemName;
      this.getData();
    },
    // 查询方法
    getData() {
      this.$refs.ETable.getData();
    },
    // 重置方法
    resettingFn() {
      // 重置搜索数据以及搜索框的options数据
      this.options.forEach((element) => (element.value = ""));
      this.setOf.systemName = "";
    },
    async sortFun(str) {
      this.setOf.sortStr = str;
      this.getData();
    },
  },
};
</script>

<style scoped lang="scss"></style>
